import { lazy, useState, useEffect, useCallback } from 'react'
/* -------------------------------------------------------- Declare -- */

/* -------------------------------------------------------- Async Component -- */
import MaskedInput from 'react-text-mask';
/* -------------------------------------------------------- 回到顶部 -- */
const Index = ({ 
	// style, 							/** @param {String}			# 盒子 style */
	name, 							/** @param {String}				# name */
	label,							/** @param {String}				# 标签名 */
	out,							/** @param {Number}				# 在外部设置 value */
	p,								/** @param {String}				#  */
	//
	value,							/** @param {Number}				# 值 */
	disabled,						/** @param {Boolan}				# 禁用 */
	// 获取值
	onChange,						/** @param {Event}				# 有 Form 时值改变时执行 */
	onChanged,						/** @param {Event}				# 值改变时执行 */
}, ref)=> {// eslint-disable-line
	const [ model, setModel ] = useState(value)
	

	useEffect(()=> { if( !out ) {
		setModel( value )
	} }, [ value ]) // eslint-disable-line

	
	const _onChange = value => {
		let result = name ? { model: {[name]: value} } : null
		onChange?.( value )
		onChanged?.({ value, label, ...result  })
	}
	
	const carPlateMask = [ 'AAAA', '9999' ]
	  
	return (
		<MaskedInput
			mask={carPlateMask}
			placeholder="请输入车牌号"
			guide={true}
		/>
	)
}

export default Index